<template>
  <right-template :title="componentData.title" :tabName="componentData.tabName">
    <el-form class="right-img">
      <dropdown-normal label="绑定动态字段" :valLists="COMPONENT_IMG_DATAKEYS" v-model="commonAttr.dataKey" @change="onChangeAttr"></dropdown-normal>
      <add-img-con :url="commonAttr.url" comAttr="commonAttr" picAttr="url" :isCrop="true" :isDelete="true" class="margin-left-right-16"></add-img-con>
      <input-normal label="图片地址" v-model="commonAttr.url" @change="onChangeAttr"></input-normal>
      <input-normal label="图片描述" v-model="commonAttr.name" @change="onChangeAttr"></input-normal>
      <el-divider content-position="center">高级属性</el-divider>
      <switch-normal v-model="commonAttr.isDynamic" label="动态图片" @change="onChangeAttr"></switch-normal>
      <switch-normal v-model="commonAttr.isSaveImg" :label="'是否可以保存图片'" @change="onChangeAttr"></switch-normal>
      <switch-normal v-model="commonAttr.isForm" :label="'交互（表单提交）'" @change="onChangeAttr"></switch-normal>
      <template v-if="commonAttr.isForm">
        <input-normal label="导出表头" v-model="commonAttr.tableName" @change="onChangeAttr"></input-normal>
        <switch-normal v-model="commonAttr.need" :label="'设为必填项'" @change="onChangeAttr"></switch-normal>
      </template>
      <switch-normal v-model="commonAttr.isFullScreen" label="全屏" @change="onChangeAttr"></switch-normal>
      <dropdown-normal v-if="commonAttr.isFullScreen" label="图片填充样式" :valLists="IMG_FILL_TYPE" v-model="commonAttr.objectFit" @change="onChangeAttr"></dropdown-normal>
      <input-normal label="内距" placeholder="上 右 下 左" v-model="commonAttr.padding" @change="onChangeAttr"></input-normal>
      <color-normal v-model="commonAttr.backgroundColor" label="背景颜色" format="rgb" @change="onChangeAttr"></color-normal>
    </el-form>
  </right-template>
</template>

<script>
  import RightTemplate from '@/views/child/right/right-template.vue'
  import AddImgCon from '@/views/components/add-img-con.vue'
  import ColorNormal from '@/views/components/edit/ColorNormal.vue'
  import SwitchNormal from '@/views/components/edit/SwitchNormal.vue'
  import SliderNormal from '@/views/components/edit/SliderNormal.vue'
  import InputNormal from '@/views/components/edit/InputNormal.vue'
  import TextareaNormal from '@/views/components/edit/TextareaNormal.vue'
  import DropdownNormal from '@/views/components/edit/DropdownNormal.vue'

  import { editUtils } from '@/views/js/edit-utils'
  import { COMPONENT_IMG_DATAKEYS } from '@/common/data-drive-ui'
  import {  IMG_FILL_TYPE } from '@/common/const'

  export default {
    name: "RightImg",
    mixins: [editUtils],
    setup () {
      return {
        COMPONENT_IMG_DATAKEYS: COMPONENT_IMG_DATAKEYS,
        IMG_FILL_TYPE: IMG_FILL_TYPE
      }
    },
    components: {
      RightTemplate,
      ColorNormal,
      AddImgCon,
      SwitchNormal,
      SliderNormal,
      InputNormal,
      TextareaNormal,
      DropdownNormal,
    },
  };
</script>